import { useState, useEffect } from 'react'
import { Database, Zap, TrendingUp } from 'lucide-react'
import { toast } from 'react-hot-toast'
import DataGeneratorForm from '@/components/DataGenerator/DataGeneratorForm'
import TaskManager from '@/components/DataGenerator/TaskManager'
import type { DataGeneratorConfig } from '@/types/dataGenerator'
import { dataGeneratorApi } from '@/services/dataGenerator'
import { kafkaApi } from '@/services/kafka'

export default function DataGenerator() {
  const [topics, setTopics] = useState<string[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshTrigger, setRefreshTrigger] = useState(0)

  useEffect(() => {
    loadTopics()
  }, [])

  const loadTopics = async () => {
    try {
      setLoading(true)
      const topicsData = await kafkaApi.getTopics()
      setTopics(topicsData)
    } catch (error) {
      console.error('加载Topic列表失败:', error)
      toast.error('加载Topic列表失败')
    } finally {
      setLoading(false)
    }
  }

  const handleStartGeneration = async (config: DataGeneratorConfig) => {
    try {
      const result = await dataGeneratorApi.startGeneration(config)
      toast.success(`数据生成任务已启动: ${result.task_id.slice(0, 8)}...`)
      
      // 触发任务列表刷新
      setRefreshTrigger(prev => prev + 1)
    } catch (error: any) {
      console.error('启动数据生成失败:', error)
      const errorMessage = error.response?.data?.detail || error.message || '启动数据生成失败'
      toast.error(errorMessage)
      throw error
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-96">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">加载中...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        <div className="flex items-center space-x-3 mb-4">
          <div className="p-2 bg-blue-100 rounded-lg">
            <Zap className="w-6 h-6 text-blue-600" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">数据生成器</h1>
            <p className="text-gray-600">生成测试数据并发送到Kafka Topic</p>
          </div>
        </div>

        {/* 功能特性 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg">
            <Database className="w-8 h-8 text-blue-600" />
            <div>
              <div className="font-semibold text-blue-900">自定义字段</div>
              <div className="text-sm text-blue-700">支持多种数据类型和配置选项</div>
            </div>
          </div>

          <div className="flex items-center space-x-3 p-4 bg-green-50 rounded-lg">
            <TrendingUp className="w-8 h-8 text-green-600" />
            <div>
              <div className="font-semibold text-green-900">流式发送</div>
              <div className="text-sm text-green-700">支持按间隔流式发送或批量发送</div>
            </div>
          </div>

          <div className="flex items-center space-x-3 p-4 bg-purple-50 rounded-lg">
            <Zap className="w-8 h-8 text-purple-600" />
            <div>
              <div className="font-semibold text-purple-900">实时监控</div>
              <div className="text-sm text-purple-700">实时查看生成进度和任务状态</div>
            </div>
          </div>
        </div>
      </div>

      {/* 数据生成配置表单 */}
      <DataGeneratorForm 
        topics={topics} 
        onStartGeneration={handleStartGeneration}
      />

      {/* 任务管理 */}
      <TaskManager refreshTrigger={refreshTrigger} />
    </div>
  )
}
